<template>
  <up-popup :show="bankCardShow" @close="bankCardShow = false" :round="20">
    <view class="addBankCard" v-if="type == 1">
      <view class="title">添加銀行卡 <i @tap="bankCardShow = false"></i></view>
      <view class="addBankCardInfo">
        <view @tap="bankCategoryShow = true">
          <view>銀行類型</view>
          <view class="arrow">
            {{ bank_name }}
            <text v-if="!bank_name">請選擇銀行類型</text>
          </view>
        </view>
        <view>
          <view
            >持卡人
            <text>提示：戶名跟卡必須是實名綁定，否則會造成出款失敗</text>
          </view>
          <view>
            <input
              placeholder="請輸入持卡人姓名"
              v-model="account_holder"
              :disabled="!!bankCardList.length"
            />
          </view>
        </view>
        <view>
          <view>卡號 </view>
          <view>
            <input placeholder="請輸入銀行卡卡號" v-model="card_number" />
          </view>
        </view>
        <view>
          <view>開戶行 </view>
          <view>
            <input placeholder="請輸入開戶行名稱" v-model="branch_name" />
          </view>
        </view>
        <view>
          <view>電話 </view>
          <view>
            <input placeholder="請輸入聯繫電話" v-model="phone_number" />
          </view>
        </view>
      </view>
      <up-button
        :disabled="
          !(
            card_number &&
            account_holder &&
            bank_name &&
            branch_name &&
            phone_number
          )
        "
        text="保存"
        @tap="userWithdrawalBankCardAddFn"
        type="primary"
      ></up-button>

      <up-picker
        closeOnClickOverlay
        :show="bankCategoryShow"
        keyName="bank_name"
        :columns="bankCategoryList"
        @close="bankCategoryShow = false"
        @cancel="bankCategoryShow = false"
        @confirm="confirmFn"
      ></up-picker>
    </view>
    <view class="addBankCard" v-if="type == 2">
      <view class="title"
        >選擇提現銀行卡 <i @tap="bankCardShow = false"></i
      ></view>
      <view class="bankList">
        <view
          v-for="(item, idx) in bankCardList"
          :key="idx"
          :class="{ active: item.id == getBankCardObj.id }"
          @tap="getBankCardObjFn(item)"
        >
          <view>{{ item.bank_name }}</view>
          <view>{{ item.account_holder }}</view>
          <view>{{ item.card_number }}</view>
        </view>
      </view>
      <up-button text="+添加新卡" @tap="type = 1" type="primary"></up-button>
    </view>

    <up-popup :show="otherShow" @close="otherShow = false" :round="20">
      <view class="addBankCard">
        <view class="title">其它銀行類型 <i @tap="otherShow = false"></i></view>
        <view class="addBankCardInfo">
          <view>
            <view>其它銀行類型 </view>
            <view>
              <input
                focus
                placeholder="請輸入其它銀行類型"
                v-model="bank_name_other"
              />
            </view>
          </view>
        </view>
        <up-button
          :disabled="!bank_name_other"
          text="確認"
          @tap="
            bank_name = bank_name_other;
            otherShow = false;
          "
          type="primary"
        ></up-button>

        <up-picker
          closeOnClickOverlay
          :show="bankCategoryShow"
          keyName="bank_name"
          :columns="bankCategoryList"
          @close="bankCategoryShow = false"
          @cancel="bankCategoryShow = false"
          @confirm="confirmFn"
        ></up-picker>
      </view>
    </up-popup>
    <psw
      ref="pswRef"
      @pswFinish="pswFinish"
      tips="添加銀行卡"
      title="請輸入支付密碼，以驗證身份"
    />
  </up-popup>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance } from "vue";
import { onShow } from "@dcloudio/uni-app";

import {
  BankCategory,
  UserWithdrawalBankCard,
  UserWithdrawalBankCardAdd,
} from "@/api/UserApi";
const instance = getCurrentInstance()?.appContext.config.globalProperties;

const emit = defineEmits();
let myUserInfo = ref();
onShow(() => {
  myUserInfo.value = uni.getStorageSync("userInfo");
});
let type = ref<number>(1);

let bankCardShow = ref<boolean>(false);
let otherShow = ref<boolean>(false);
let bankCardList = ref<Array<any>>([]);

let bank_name = ref<string>();
let bank_name_other = ref<string>();
let card_number = ref<string>();
let account_holder = ref<string>();
let branch_name = ref<string>();
let phone_number = ref<string>();

// 添加银行卡
let pswRef = ref<any>(null);
const userWithdrawalBankCardAddFn = async () => {
  if (!myUserInfo.value.payment_password_set) {
    uni.showModal({
      title: "温馨提示",
      content: "请先设置支付密码",
      confirmText: "确认",
      cancelText: "取消",
      success: async (r) => {
        if (r.confirm) {
          instance?.goTo("/pages/pay/paymentPassword");
        }
      },
    });
    return;
  }
  pswRef.value.openPsw();
};
const pswFinish = async (payment_password: string) => {
  await UserWithdrawalBankCardAdd({
    bank_name: bank_name.value,
    card_number: card_number.value,
    account_holder: account_holder.value,
    branch_name: branch_name.value,
    phone_number: phone_number.value,
    payment_password,
  });
  await getUserWithdrawalBankCard();
  uni.showToast({ title: "绑定成功", icon: "none" });
  getBankCardObjFn(bankCardList.value[0]);
};
let getBankCardObj = ref<any>({});

const getBankCardObjFn = (item: any) => {
  bank_name.value = "";
  card_number.value = "";
  branch_name.value = "";
  phone_number.value = "";
  getBankCardObj.value = item;
  emit("getBankCardObjFn", item);
  bankCardShow.value = false;
};

let bankCategoryList = ref<Array<any>>();
let bankCategoryShow = ref<boolean>(false);
// 银行类型列表
const bankCategoryFn = async () => {
  let list = await BankCategory();
  bankCategoryList.value = reactive([
    [...list, { bank_name: "其他", bank_id: -1 }],
  ]);
  console.log(bankCategoryList.value);
};
bankCategoryFn();

const confirmFn = (e: any) => {
  bankCategoryShow.value = false;
  if (e.value[0].bank_id == -1) {
    bank_name_other.value = "";
    otherShow.value = true;
  } else {
    bank_name.value = e.value[0].bank_name;
  }
};

const getUserWithdrawalBankCard = async () => {
  bankCardList.value = await UserWithdrawalBankCard();
  account_holder.value = bankCardList.value[0]?.account_holder;
};

// 打开弹窗
const openBankCard = async (status: number) => {
  await getUserWithdrawalBankCard();
  if (status) {
    type.value = status;
  } else {
    if (bankCardList.value?.length) {
      type.value = 2;
    } else {
      type.value = 1;
    }
  }

  bankCardShow.value = true;
};

defineExpose({
  openBankCard,
});
</script>

<style scoped lang="scss">
@import "../../../static/scss/myWallet.scss";
</style>
